<template>
  <div class="fillcontain">
    <div class="mac_b">
      <div class="search_box clearfix">
        <div class="sensor_name">
          <span class="bt">西海00s</span>
          <span class="lit_tip">正常</span>
        </div>
        <div class="sensor_list">
          <span>ID：</span>
          <span>XH00001-L</span>
          <span class="mar4">设备类型：</span>
          <span>电盒</span>
        </div>
      </div>
      <div>
        <template>
          <el-tabs class="tab_post" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="告警事件" name="first">
              <div class="table_container mac_container">
                <div class="tab_tip">
                  <span>历史事件</span>
                  <el-dropdown class="drop_list"  trigger="click" size="mini" ref="messageDrop" @command="columnChange">
                    <span class="el-dropdown-link">
                      告警类型<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="checkItem clearfix">
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                      </el-checkbox-group>
                      <el-button size="mini" @click="closed">确定</el-button>
                      <el-button size="mini" @click="rest">重置</el-button>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="运行数据" name="second">
              <div class="table_container mac_container">
                <span>汇总数据：</span>
                <el-date-picker type="date" placeholder="选择日期" v-model="startDate" value-format="yyyy-MM-dd" style="width: 150px"></el-date-picker>
                <span>至</span>
                <el-date-picker type="date" placeholder="选择日期" v-model="endDate" value-format="yyyy-MM-dd" style="width: 150px"></el-date-picker>


                <div class="global_box clearfix">
                  <div class="global_tab fl">
                    <span>累计输入用电量：</span>
                    <span>12543.22Kw</span>
                  </div>
                  <div class="global_tab fl">
                    <span>累计输出用电量：</span>
                    <span>12543.22Kw</span>
                  </div>
                  <div class="global_tab fl">
                    <span>日平均用电量：</span>
                    <span>12543.22Kw</span>
                  </div>
                </div>

              </div>
            </el-tab-pane>
            <el-tab-pane label="设备设置" name="third">
              <div class="table_container mac_container">
                <div class="mac_log_t fl">
                  设备基本配置
                </div>

              </div>
            </el-tab-pane>
            <el-tab-pane label="数据日志" name="fourth">
              <div class="table_container mac_container" style="padding-top:24px">
                  <div class="tab_search clearfix">
                    <div class="mac_log_t fl">
                      设备数据日志
                    </div>
                    <div class="fr">
                      <el-button icon="el-icon-download">下载日志记录</el-button>
                    </div>
                  </div>
                  <div class="table_com">
                    <el-table  ref="multipleTable"
                               :data="tableData">
                      <el-table-column
                        label="上报时间" width="80"
                        type="index" />
                      <el-table-column
                        label="端口"
                        prop="vlanName" />
                      <el-table-column
                        label="端口状态"
                        prop="status" />
                      <el-table-column
                        label="输入/输出电压"
                        prop="type"/>
                      <el-table-column
                        label="输入/输出电流"
                        prop="des"/>
                      <el-table-column
                        label="输入/输出功率"
                        prop="des"/>
                      <el-table-column
                        label="频率"
                        prop="des"/>
                      <el-table-column
                        label="累计时长"
                        prop="des"/>
                    </el-table>
                    <div class="Pagination">
                      <el-pagination
                        :current-page="currentPage"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="count">
                      </el-pagination>
                    </div>
                  </div>
                </div>
            </el-tab-pane>
            <div class="tab_fix">
              <div class="first_box">
                <div class="box_list clearfix">
                  <span class="fl">开机状态</span>
                  <span class="fr">已开机</span>
                </div>
                <div class="box_list clearfix">
                  <span class="fl">继电保护器状态</span>
                  <span class="fr clor">异常</span>
                </div>
              </div>

              <div class="first_box">
                <div class="box_list clearfix">
                  <strong>设备信息</strong>
                  <p>ID:00001</p>
                  <p>mac:00-01-6C-06-A6-39</p>
                  <p>设备型号：DH-00001</p>
                </div>
              </div>
              <div class="first_box">
                <div class="box_list clearfix">
                  <strong>设备商户信息</strong>
                  <p>所属商户：西海商户001</p>
                  <p>设备所在地：北京-西城</p>
                  <p>分组：北京-西城</p>
                  <p>负责人：张晓三</p>
                </div>
              </div>
              <div class="first_box">
                <div class="box_list clearfix">
                  <strong>设备生产信息</strong>
                  <p>设备厂家：数知科技</p>
                  <p>出厂日期：2019年04月24日</p>
                  <p>生产批次：生产批次001</p>
                </div>
              </div>

            </div>
          </el-tabs>
        </template>
      </div>


    </div>
  </div>

</template>

<script>
  const cityOptions = ['过压', '欠压', '过流','过频','漏电','电流过低','输出功率过大或过小','端口用电量超过阈值','设备温度搞过阈值'];
  export default {
    data() {
      return {
        params: {},
        limit: 20,
        count: 0,
        currentPage: 1,
        startDate: "",
        endDate: "",
        tableData: [{name:'edede'}],
        activeName:'first',
        checkData: [],
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true

      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
        //重置
      rest() {
          this.checkedCities = [];
      },
      columnChange() {
        this.$refs.messageDrop.show();
      },
      closed() {
        this.$refs.messageDrop.hide();
      },
      //nav
      handleClick(tab, event) {
        console.log(tab, event)

      },
      async initData(){
        try{
          this.city = await cityGuess()
          const countData = await getResturantsCount()
          if (countData.status == 1) {
            this.count = countData.count
          }else{
            throw new Error('获取数据失败')
          }
          this.getResturants()
        }catch(err){
          console.log('获取数据失败', err)
        }
      },
      async getCategory(){
        try{
          const categories = await foodCategory()
          categories.forEach(item => {
            if (item.sub_categories.length) {
              const addnew = {
                value: item.name,
                label: item.name,
                children: []
              }
              item.sub_categories.forEach((subitem, index) => {
                if (index == 0) {
                  return
                }
                addnew.children.push({
                  value: subitem.name,
                  label: subitem.name,
                })
              })
              this.categoryOptions.push(addnew)
            }
          })
        }catch(err){
          console.log('获取商铺种类失败', err)
        }
      },
      async getResturants(){
        const {latitude, longitude} = this.city
        const restaurants = await getResturants({latitude, longitude, offset: this.offset, limit: this.limit})
        this.tableData = []
        restaurants.forEach(item => {
          const tableData = {}
          tableData.name = item.name
          tableData.description = item.description
          tableData.id = item.id
          tableData.phone = item.phone
          tableData.rating = item.rating
          tableData.recent_order_num = item.recent_order_num
          tableData.category = item.category
          tableData.image_path = item.image_path
          this.tableData.push(tableData)
        })
      },

    },
  }
</script>

<style lang="less" scoped>
  .sensor_name .lit_tip{
    font-size: 12px;
    font-weight: normal;
    margin-left:20px;
    color: blue;
  }
  .search_box{
    border:none;
    padding: 20px;
  }
  .search_box .sensor_name {
    margin-bottom: 20px;
  }
  .sensor_name .bt {
    font-weight: bold;
  }
  .search_box .sensor_list {
    font-size: 14px;
  }
  .tab_post .el-tabs__header{
    padding-top:0;
    margin: 0!important;
    background: white;
  }
  .el-tabs__nav-wrap::after {
    background-color: none!important;
  }
  .el-tabs__nav-wrap::after{
    width:0;
  }
  .table_container .tab_search {
    clear: both;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .table_container .tab_search .fl {
    float: left;
  }
  .table_container .tab_search .fr {
    float: right;
  }
  .tab_post{
    position: relative;
    height:100%;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
    background: #F0F2F5;
  }
  .mac_container{
    min-height: 526px;
    padding: 20px 30px;
    margin-right:274px;
    box-sizing: border-box;
    background: #fff;
  }
  .global_box {
    font-size: 14px;
    color: #333;
    padding: 20px 0;
    line-height: 25px;
  }
  .tab_fix{
    position:absolute;
    top:0px;
    right:20px;
    width:240px;
    height: 100%;
    padding: 0 0;
    padding-left: 0;
    background: #F0F2F5;
    box-sizing: border-box;
  }
  .first_box{
    font-size: 12px;
    line-height: 22px;
    padding:20px 30px;
    margin-bottom:10px;
    color: #333;
    background: #fff;
  }
  .first_box strong{
    font-size: 12px;
    line-height: 24px;
  }
  .first_box p{
    margin:0;
  }
  .first_box .zc{
    color: blue;
  }
  .first_box .zd{
    color: red;
  }
  .checkItem label{
    display: block;
    margin: 10px;
  }
  .drop_list{
    margin-left:80px;
  }
  .mac_log_t{
    font-size: 16px;
    font-weight: normal;
    color:#333;
  }
</style>
